Server Rendering Strategies

Next.js は Route 単位でレンダリング方法を自動で切り替える

Static Rendering（デフォルト）

ビルド時または Revalidate 時にレンダリング結果をキャッシュファイルに出力し、Route のレスポンスとして返す

この成果物は CDN から配信できる

SSG や ISR から派生した機能

リクエストがあるたびにレンダリングする

都度評価するので、Static Rendering と比較するとパフォーマンスが悪い

以下のいずれかに当てはまる場合、Static Rendering ではなくこちらが採用される

https://scrapbox.io/files/66c58ea29a3dbb001d8036ca.png

1. 動的データを取得する場合

2. Dynamic Functions を利用する場合

Dynamic Functions = リクエスト時にしか分からない情報に依存する関数

Server Component で cookies() を使用する: Cookie の参照

NextAuth.js の getServerSession も cookies を呼び出しているので Dynamic Functions と見なされる

Server Component で headers() を使用する: リクエストヘッダの参照

Server Component で Props の searchParams を参照する: クエリパラメータの参照

unstable_noStore: キャッシュ無効

unstable_after: レスポンス終了後に実行する処理をスケジューリング

3. Dynamic Routes を使用している場合

ドキュメントに記載が無いが、実際に試すと Dynamic Rendering となることを確認 radish-miyazaki.icon

Next 14

generateStaticParams を用いて SSG（ISR）が可能

→ Dynamic Rendering でなくなる

next buildを実行すると、すべての Route についてレンダリングが行われ、レンダリング方式が決まる

出力結果を見ると、どちらでレンダリングされるかが分かる

https://scrapbox.io/files/66c58f59a38159001c3647c3.png